<!DOCTYPE html>
<html>

<head>
  <title>leaflet-canvas-marker</title>
  <meta charset="utf-8" />
  <!-- 引入leafletapi -->
  <link rel="stylesheet" href="./js/leaflet.css" />
  <script src="./js/leaflet.js"></script>
  <!-- 引入leaflet-canvas-marker插件,已解决了缩放时飘的问题 -->
   <script src="./js/leaflet.canvas-markers.js"></script>
  <style>
    body {
      margin: 0;
    }

    .map {
      position: absolute;
      height: 100%;
      right: 0;
      left: 0;
    }

    .menuBar {
      position: relative;
      text-align: center;
      top: 10px;
      margin: 0 50px;
      padding: 5px;
      border-radius: 3px;
      z-index: 999;
      color: #ffffff;
      background-color: rgba(0, 168, 0, 1);
    }
  </style>
</head>

<body>
  <div class="map" id="map"></div>
  <div class="menuBar">
    10万条数据，缩小地图感受一下
    参考：<a href="http://gisarmory.xyz/blog/leaflet-100ThousandData/demo.html">在线示例</a>
  </div>
  <script>
    var map = L.map('map', {
      center: [39.905963, 116.390813],
      zoom: 15,
      preferCanvas: true //使用canvas模式渲染矢量图形 
    });
    //添加底图
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    //使用canvas模式渲染marker
    var ciLayer = L.canvasIconLayer({}).addTo(map);
    var icon = L.icon({
      iconUrl: './imgs/pothole.png',
      iconSize: [20, 18],
      iconAnchor: [10, 9]
    });
    for (var i = 0; i < 100000; i++) {
      var lat = 39.905963 + (Math.random() - Math.random()) * 3;
      var lng = 116.390813 + (Math.random() - Math.random()) * 3;
      var marker = L.marker([lat, lng], {
        icon: icon
      })
        .bindPopup("I Am " + i); //绑定气泡窗口
      ciLayer.addLayer(marker);
    }
  </script>
</body>

</html>